<div id="app">
  <div v-for="(item,index) in items" >
    <child></child>
    <button @click="remove(index)">delete</button>
  </div>
  <button @click=add>add</button>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
  //[{id:1}, {id:2}, {id:3}]
  //[child1, child2, child3]
  const app = Vue.createApp({
    data() { return { items: [] } },
    methods:{
      remove(index) { 
        console.log('remove ', index)
        this.items.splice(index,1) 
      },
      add() { this.items.push({id: Math.random()}) }
    }
  })
  app.component('child', {
    data() { return { counter: Math.random() } },
    template: `<span>{{counter}} </span>` ,
    unmounted() {
      console.log(this.counter + ' unmounted')
    }, 
  })
  app.mount('#app')
</script>